<template>
  <div>
    <center><h1>用户登录</h1></center>
    <a-form-item label="用户名" v-bind="formlayout">
      <a-input v-model="username" placeholder="请输入用户名"></a-input>
    </a-form-item>

    <a-form-item label="密码" v-bind="formlayout">
      <a-input v-model="password" placeholder="请输入密码"></a-input>
    </a-form-item>

    <a-form-item label="手机号" v-bind="formlayout">
      <a-input v-model="phone" placeholder="请输入手机号"></a-input>
      <a-form-item v-bind="buttonlayout">
            <a-button 
            type="primary"
            @click="send_phone">获取短信验证码</a-button>
        </a-form-item>
    </a-form-item>

    <a-form-item label="手机验证码" v-bind="formlayout">
      <a-input v-model="phone_code" placeholder="请输入手机验证码"></a-input>
    </a-form-item>
    

    <a-form-item v-bind="buttonlayout">
      <a-button type="primary" @click="login">用户登录</a-button>
      <!-- <a href="http://127.0.0.1:8000/myapp/ding_url/"> -->
        <img @click="ding_url" style="margin-left:20px; cursor: pointer" src="http://127.0.0.1:8000/static/dingding.png" alt="">
        <img @click="mayun_url" style="margin-left:20px; cursor: pointer" src="http://127.0.0.1:8000/static/mayun.png" alt="">
      <!-- </a> -->
    </a-form-item>
  </div>
</template>

<script>
import { get_phone, user_login, get_dingurl } from './axios_http/api'
export default {
    data() {
        return {
            username: '',
            password: '',
            phone: '',
            phone_code: '',
            // 表单样式
            formlayout:{
                // 标签
                labelCol:{
                    xs:{span:24},
                    sm:{span:8}
                },
                // 文本框
                wrapperCol:{
                    xs:{span:24},
                    sm:{span:8}
                }
            },
            
            // 按钮样式
            buttonlayout:{
                // 按钮
                wrapperCol:{
                    xs:{span:24,offset:0},
                    sm:{span:16,offset:8}
                },
            },
        }
    },
    methods:{
        // 发送短信验证码
        send_phone() {
            get_phone({"phone": this.phone}).then((resp) => {
                console.log(resp)
                this.$message.info(resp.msg)
            })
        },
        // 登录
        login() {
            let data = {
                "username": this.username,
                "password": this.password,
                "phone": this.phone,
                "phone_code": this.phone_code
            }
            user_login(data).then((resp) => {
                this.$message.info(resp.msg)
                if(resp.code == 200){
                    
                    localStorage.setItem("token", resp.data.token)
                    localStorage.setItem("username", resp.data.username)
                    localStorage.setItem("uid", resp.data.uid)
                    this.$router.push('/home')
                }
            })
        },
        ding_url() {
            window.location.href = 'http://127.0.0.1:8000/myapp/tripartiteurl/?name=dingding'
        },
        mayun_url(){
            window.location.href = 'http://127.0.0.1:8000/myapp/tripartiteurl/?name=gitee'

        }
        
    },
};
</script>